<template>
  <view class="viewed-by-hr-container">
    <!-- 自定义头部 -->
    <CustomHeader></CustomHeader>
    
    <!-- 页面标题 -->
    <view class="header">
      <view class="header-content">
        <view class="back-btn" @click="goBack">
          <image
            class="back-icon"
            src="/static/icons/candidate/pre_page.png"
          ></image>
        </view>
        <text class="header-title">谁看过我</text>
        <view class="header-right"></view>
      </view>
    </view>

    <!-- HR列表 -->
    <scroll-view class="hr-list" scroll-y @scrolltolower="loadMore">
      <view
        class="hr-card"
        v-for="(hr, index) in hrList"
        :key="index"
        @click="goToHrHome(hr)"
      >
        <view class="hr-header">
          <image
            class="avatar"
            :src="hr.face || '/static/images/avatar.png'"
          />
          <view class="hr-info">
            <view class="company-section">
              <text class="company-name">{{ hr.companyName }}</text>
            </view>
            <view class="position-section">
              <text class="position">{{ hr.position }}</text>
            </view>
          </view>
          <view class="view-time-section">
            <text class="view-time">{{ formatViewTime(hr.viewTime) }}</text>
          </view>
        </view>
      </view>

      <!-- 空状态 -->
      <view class="empty-state" v-if="hrList.length === 0 && !loading">
        <image class="empty-icon" src="/static/icons/candidate/collect.png"></image>
        <text class="empty-text">暂无HR查看记录</text>
        <text class="empty-tip">完善你的简历，吸引更多HR关注~</text>
      </view>

      <!-- 加载更多 -->
      <uni-load-more 
        :status="loadingStatus" 
        :content-text="{
          contentdown: '上拉显示更多',
          contentrefresh: '正在加载...',
          contentnomore: '没有更多记录了~'
        }"
        style="margin-bottom: 40rpx;"
      />
    </scroll-view>
  </view>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { getJobSeekerViewedByHrList } from "@/api/resume.js";
import CustomHeader from "@/components/CustomHeader.vue";

// HR列表
const hrList = ref([]);
const loading = ref(false);
const loadingStatus = ref("more");

// 分页参数
const pageParams = ref({
  pageNo: 1,
  pageSize: 10
});

const totalPages = ref(0);

// 返回上一页
const goBack = () => {
  uni.navigateBack();
};

// 跳转到HR主页
const goToHrHome = (hr) => {
  if (!hr || !hr.hrId) {
    uni.showToast({
      title: 'HR信息获取失败',
      icon: 'none'
    });
    return;
  }
  
  uni.navigateTo({
    url: `/pages/candidate/position/hrView?hrId=${hr.hrId}`
  });
};

// 获取HR查看记录列表
const fetchHrViewList = async (isLoadMore = false) => {
  if (loading.value) return;
  
  loading.value = true;
  
  try {
    if (!isLoadMore) {
      pageParams.value.pageNo = 1;
      hrList.value = [];
      loadingStatus.value = "loading";
    }
    
    const response = await getJobSeekerViewedByHrList(pageParams.value);
    
    if (response && response.list !== undefined) {
      if (isLoadMore) {
        hrList.value = [...hrList.value, ...response.list];
      } else {
        hrList.value = response.list;
      }
      
      totalPages.value = response.totalPages || 0;
      
      // 更新加载状态
      if (pageParams.value.pageNo >= totalPages.value) {
        loadingStatus.value = "noMore";
      } else if (response.list.length === 0) {
        loadingStatus.value = "noMore";
      } else {
        loadingStatus.value = "more";
      }
    } else {
      loadingStatus.value = "noMore";
    }
  } catch (error) {
    console.error("获取HR查看记录失败:", error);
    uni.showToast({
      title: "获取记录失败",
      icon: "none",
      duration: 2000
    });
    loadingStatus.value = "more";
  }
  
  loading.value = false;
};

// 加载更多
const loadMore = async () => {
  if (loadingStatus.value === "noMore" || loading.value) return;
  
  pageParams.value.pageNo++;
  await fetchHrViewList(true);
};

// 格式化查看时间
const formatViewTime = (timeString) => {
  if (!timeString) return "";
  
  const date = new Date(timeString);
  const now = new Date();
  const diff = now.getTime() - date.getTime();
  
  const days = Math.floor(diff / (1000 * 60 * 60 * 24));
  const hours = Math.floor(diff / (1000 * 60 * 60));
  const minutes = Math.floor(diff / (1000 * 60));
  
  if (days > 0) {
    return `${days}天前`;
  } else if (hours > 0) {
    return `${hours}小时前`;
  } else if (minutes > 0) {
    return `${minutes}分钟前`;
  } else {
    return "刚刚";
  }
};

// 页面加载时获取数据
onMounted(() => {
  fetchHrViewList();
});
</script>

<style lang="scss" scoped>
.viewed-by-hr-container {
  background-color: #f5f5f5;
  min-height: 100vh;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}

/* 页头样式 */
.header {
  background-color: #ffffff;
  border-bottom: 1px solid #f0f0f0;
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 30rpx;
  height: 88rpx;
}

.back-btn {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.back-icon {
  width: 48rpx;
  height: 48rpx;
}

.header-title {
  font-size: 36rpx;
  font-weight: 500;
  color: #333;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
}

.header-right {
  width: 60rpx;
}

/* HR列表 */
.hr-list {
  height: calc(100vh - 200rpx);
  padding: 20rpx;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}

.hr-card {
  background: #fff;
  margin-bottom: 20rpx;
  padding: 30rpx;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.hr-header {
  display: flex;
  align-items: center;
  width: 100%;
  overflow: hidden;

  .avatar {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
    margin-right: 20rpx;
    flex-shrink: 0;
  }

  .hr-info {
    flex: 1;
    min-width: 0; /* 允许flex项目缩小到内容宽度以下 */
    overflow: hidden;

    .company-section {
      margin-bottom: 8rpx;
      overflow: hidden;

      .company-name {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: block;
      }
    }

    .position-section {
      overflow: hidden;
      
      .position {
        font-size: 28rpx;
        color: #666;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: block;
      }
    }
  }

  .view-time-section {
    flex-shrink: 0;
    margin-left: 20rpx;
    display: flex;
    align-items: center;

    .view-time {
      font-size: 24rpx;
      color: #999;
      white-space: nowrap;
    }
  }
}

/* 空状态 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 40rpx;
  
  .empty-icon {
    width: 120rpx;
    height: 120rpx;
    margin-bottom: 30rpx;
    opacity: 0.3;
  }
  
  .empty-text {
    font-size: 32rpx;
    color: #333;
    margin-bottom: 16rpx;
  }
  
  .empty-tip {
    font-size: 26rpx;
    color: #999;
    text-align: center;
  }
}
</style>
